<template>
	<view @tap="touchContainer(itemId)" class="card_style__container">
		<view class="flex-x">
			<view class="style__image">
				<image :src="src" mode="aspectFit"/>
			</view>
			<view class="style__message flex-y top">
				<view class="message__head">{{name}}</view>
				<view class="message_position">
					<view class="message__middle" :style="numberStyle">{{number}}</view>
					<view class="message__bottom" :style="priceStyle">￥{{price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemId: {
				type: String,
				default: ''
			},
			src: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			number: {
				type: String,
				default: ''
			},
			price: {
				type: String,
				default: ''
			},
			numberStyle: {
				type: Object,
				default: () => {
					color: "#999999"
				}
			},
			priceStyle: {
				type: Object,
				default: () => {
					color: "#333333"
				}
			}
		},
		methods: {
			touchContainer: function(itemId, type) {
				this.$emit('event', itemId, type)
			}
		}
	}
</script>

<style>
	.card_style__container {
		width: 100%;
		background-color: #FFFFFF;
	}
	
	.style__image {
		width: 180rpx;
		height: 180rpx;
		margin: 20rpx 30rpx;
	}
	
	.style__image image {
		width: 180rpx;
		height: 180rpx;
	}
	
	.style__message {
		margin: 20rpx 0;
		height: 180rpx;
		width: calc(100% - 270upx);
		position: relative;
	}
	
	.style__message .message__head {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333333;
		font-weight: bold;
	}
	
	.style__message .message_position {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	
	.style__message .message__middle {
		font-size: 22rpx;
		margin: 20rpx 0 10rpx 0;
		color: #999999;
		line-height: 34rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.style__message .message__bottom {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		font-weight: bold;
	}
</style>
